<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华猫首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="./detail.css">
    <link rel="stylesheet" type="text/css" href="../../css/libs/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css">
    <script src="../../js/common.js"></script>


</head>
<body>
<div class="app">
<header id="header" class="aui-bar aui-bar-nav ">

    <a href="#" class="aui-pull-left aui-btn ">
        <span class="aui-iconfont aui-icon-left"></span>

    </a>
    <div class="aui-title"> 商品详情</div>
    <!-- TODO! 点击收藏，等后台接口-->
    <a href="#" class="aui-pull-right aui-btn">
        <span class="aui-iconfont aui-icon-like" v-if="!productArr.favorites" ></span>

        <svg t="1530672347196" class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3903" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" v-if="productArr.favorites"><defs><style type="text/css"></style></defs><path d="M724.992 58.026667c-84.309333 0-162.474667 42.325333-214.016 111.957333C459.434667 100.352 380.928 58.026667 296.96 58.026667 145.066667 58.026667 21.504 193.194667 21.504 359.082667c0 98.986667 44.373333 168.277333 79.872 224.256C204.8 745.472 464.554667 947.2 475.477333 955.733333c10.581333 8.192 22.869333 12.288 35.498667 12.288 12.288 0 24.917333-4.096 35.157333-12.288 10.922667-8.533333 271.018667-210.261333 374.101333-372.394667 35.498667-55.978667 79.872-125.269333 79.872-224.256C1000.106667 193.194667 876.544 58.026667 724.992 58.026667L724.992 58.026667 724.992 58.026667 724.992 58.026667zM724.992 58.026667" p-id="3904" fill="#ea5404"></path></svg>
        <span class="aui-font-size-14" style="padding: 0 .25rem;color: #999" v-if="productArr.favorites>0">收藏</span>
        <span class="aui-font-size-14" style="padding: 0 .25rem;color: #999" v-else>已收藏</span>
    </a>
</header>
<section id="app">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="img in bannerImg">  <img :src="orImg(img)"  v-cloak/></div>

        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="detail-price aui-padded-10 clearf">
        <p class="aui-text-danger aui-pull-left">  <span class="aui-font-size-18" style="font-weight: bold">{{splitPrice(productArr.marketPrice)[0]}}</span> .<span>{{splitPrice(productArr.marketPrice)[1]}}</span></p><div  class="aui-pull-right detail-img-num "><span class="aui-font-size-16 current-page ">1</span> <span class="">/{{bannerImg.length}}</span> </div>
    </div>

    <div class="detail-header aui-padded-10 aui-margin-b-10">
        <p >{{productArr.goodsName}}</p>
        <span> {{productArr.shopName}}</span>
    </div>

    <div class="detail-inner-header aui-padded-l-10 aui-padded-b-10 aui-padded-t-10">
        <span class="band"></span>
        <span class="aui-font-size-14"> 评价（{{readComment.length }}）</span>
    </div>
    <div class="discuss-list aui-content">
        <div class="aui-card-list cart-border" v-for="o in limitShow">
            <div class="aui-card-list-header aui-card-list-user ">
                <div class="aui-card-list-user-avatar">
                    <img src=" img/user.png" alt="" class="aui-img-round" v-if="!o.userPhoto">
                    <img :src=" imgUrl+o.userPhoto" alt="" class="aui-img-round" v-if="o.userPhoto">
                </div>
                <div class="aui-card-list-user-name">
                    <div v-cloak> {{o.loginName}}</div>
                    <small >
                        <i class="discuss-star star" v-for="v in o.goodsScore"></i>
                    </small>
                </div>
                <div class="aui-card-list-user-info" v-cloak>{{o.createTimes}}</div>
                <!--<p></p>-->

            </div>
            <p class="aui-font-size-16 discuss-inner">
                {{o.content}}
            </p>
            <div class="aui-card-list-content-padded ">
              <div class="aui-row aui-row-padded">
                  <div class="aui-col-xs-4" v-for="t in o.images.split(',')">
                      <img :src="orImg(t)" alt="">
                  </div>
              </div>

            </div>
            <!-- 尾部-->
            <!--TODO! 评价缺后台规格-->
            <div class="aui-card-list-footer">
                18分 I-J色SI1, 白18K, 1件
            </div>
        </div>


    </div>
    <div class="clearf click-more aui-text-center">
        <div class=" click-more-btn aui-btn aui-btn-warning aui-btn-outlined" @click="location.href= './detailDiscuss.html?goodsId='+productArr.goodsId">
             查看全部评价
        </div>
    </div>
    <div class="detail-shop">
        <div class="shop-logo  aui-padded-l-10">
            <div class="row clearf">
                <div class="aui-col-xs-4" style="height: 2.3rem;overflow: hidden "><img :src="orImg(productArr.shopLog)" :alt="productArr.shopName"></div>

                <div class="aui-col-xs-8 shopped">
                    <div v-cloak> {{productArr.shopName}}</div>
                <p>综合评分  {{productArr.shopScores}}</p>
                </div>
            </div>
        </div>
        <div class="shop-btn aui-padded-l-10">
            <div class="aui-btn aui-btn-default aui-btn-outlined shop-btn-detail"> <span class="detail-icon icon-k"></span><span>联系客服</span></div>
            <div class="aui-btn aui-btn-default aui-btn-outlined shop-btn-detail" style="margin-left: 1rem"> <span class="detail-icon icon-d"></span> <span>联系卖家</span></div>
        </div>
    </div>
    <div class=" detail-inner aui-margin-t-10 aui-content">

        <div class="detail-inner-header aui-padded-l-10 aui-padded-b-10 aui-padded-t-10">
             <span class="band"></span>
            <span class="aui-font-size-14"> 商品详情</span>
        </div>
        <div v-html="productArr.goodsDesc"></div>
    </div>
</section>
<footer>
    <!--<div class="aui-bar aui-bar-tab" id="footer">-->
        <!--<div class="aui-bar-tab-item aui-active" tapmode>-->
            <!--<i class="aui-iconfont aui-icon-home"></i>-->
            <!--<div class="aui-bar-tab-label">首页</div>-->
        <!--</div>-->
        <!--<div class="aui-bar-tab-item" tapmode>-->
            <!--<i class="aui-iconfont aui-icon-home"></i>-->
            <!--<div class="aui-bar-tab-label">首页</div>-->
        <!--</div>-->
    <!--</div>-->
    <div class="contact-box">
            <div class="manger">

                <div class="aui-pull-left icon-padding">
                    <i class="detail-icon icon-sort "></i>
                    <p class="aui-bar-tab-label">联系卖家</p>
                </div>
                <div class="aui-pull-left icon-padding" @click="location.href='../orderSet/indexShop.html?shopId='+productArr.shopId">
                    <i class="detail-icon icon-mail"></i>
                    <p class="aui-bar-tab-label">店家</p>
                </div>
                <div class="aui-pull-left icon-padding" @click="location.href='../gwc/gouwuche.html'">
                    <i class="detail-icon icon-cart"></i>
                    <p class="aui-bar-tab-label">购物车</p>
                    <div class="aui-badge badge-position">{{band}}</div>
                </div>
            </div>
        <div class="shop-box">

            <div class="go-shopping" @click="isAlert=!isAlert;immediateBuy=true">立即购买</div>
            <div class="add-cart" @click="isAlert=!isAlert"> 加入购物车</div>
        </div>


    </div>


</footer>
    <!-- alert 加入购物车弹窗-->
     <div class="alertCart-box" v-show="isAlert">
        <div class=" alertCart">
            <div style="padding: 1rem .8rem">
                <div class="close-box" @click="isAlert=!isAlert"><span class="close">&times;</span></div>
                <div class="special-box">
                    <div  v-for="(o,i) in specialArr.catName " class="acnm">
                        <div class="special-header"> {{ o.catName}}</div>
                        <div class="special-item-box">
                            <span class="special-item"  v-for="(v,j) in specialArr.itemName[i] " @click="getSpecialId($event,i,j)"> {{v}}</span>
                        </div>
                    </div>
                </div>
                <!-- 购买数量-->
                <div class="special-num clearf">
                    <div class="aui-pull-left">购买数量 </div>
                    <div class="aui-pull-right special-cart-num" ><span @click="addnum(-1)">-</span><input type="text" v-model="num"><span @click="addnum(1)">+</span></div>
                </div>
            </div>

            <div class="sure-btn aui-btn aui-btn-info aui-btn-block" @click.stop="sureBtn">
                确定
            </div>

        </div>
    </div>

</div>
<script src="../../js/api.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/vue-resource.min.js"></script>
<script src="../../js/aui-toast.js"></script>
<script src="../../js/aui-pull-refresh.js"></script>
<script src="../../js/aui-scroll.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/libs/swiper.min.js"></script>

<script>
    $(function () {
      setToken();
        Vue.nextTick(function () {

            var mySwiper = new Swiper('.swiper-container',{
                autoplay:5000,//可选选项，自动滑动
                // pagination : '.swiper-pagination',
                loop : true,
                autoplayDisableOnInteraction: false,
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                onSlideChangeEnd:function(swiper){
                  //  alert(swiper.activeIndex)
                    document.querySelector('.current-page').innerText=swiper.activeIndex+1;
                }
            });
        });



  var vm=  new Vue({
        el:'.app',
        data:{
            productArr:{},
            readComment:[],
            limitProduct:5,
            bannerImg:[],
            isAlert:false,
            num:1,
            specialArr:{},
            specialColor:[],
            current:0,
            currentI:0,
            band:0,
            immediateBuy:false,
            store:{},
            a:[],
            b:[],
        },
        mounted:function(){
            this.$nextTick(function () {
                this.detailView();
                this.getReadComment();
                this.getSpecial();
                // this.getSpecPrice()
            })
        },
        computed:{
            limitShow:function () {
               return  this.readComment.slice(0,this.limitProduct)
            },

        },

        methods:{
            detailView:function () {
                this.$http.get(SURL+'app/Goods/goodsDetail',{params:{goodsId:getUrlParam('goodsId')}}).then(function (res) {
                  //  console.log(res)
                    this.productArr=res.body.data;
                 this.bannerImg= this.productArr.gallery.split(',');
                // console.log(this.bannerImg)


                })
            },
                //获取当前的评价列表
            getReadComment:function () {
                this.$http.get(SURL+"app/martgoods/readComment",{params:{goodsId:getUrlParam('goodsId')}}).then(function (res) {
                    //console.log(res)
                    if(res.body.status==1){
                        this.readComment=res.body.data;
                    }
                })
            },
            //获取当前的规格goodsid ** 1680可测式
            //TODO! 规格参数看不懂，
            getSpecial:function(){
                var _this=this;
                _this.$http.get(SURL+'app/Goods/goodsDetailType',{params:{goodsId:getUrlParam('goodsId')}}).then(function (res) {
                    if(res.body.status==1){
                        _this.specialArr=res.body.data;
                    }

                })
            },
            // SELECT * from word WHERE 'someone' LIKE '%You%'
            //点击获取商品规格ID
            getSpecialId:function(event,i,j){
               // console.log(i,j)
               // console.log(event.target)
                $(event.target).addClass('active').siblings('span').removeClass('active');
                $(event.target).attr('specId',this.specialArr.itemId[i][j]);
               //  console.log(this.specialArr.itemId)
                //首先判断有class的数量
                console.log(this.specialArr.itemId[i][j])

                this.a.push([i,j])
               // console.log(this.a)
                console.log(this.a.distinct());




            },

            //加入购物车

            addCarts:function(id){
                //Carts-addcarts
                //this.isAlert=!this.isAlert;

                this.$http.get(SURL+'app/Carts/addcarts',{params:{cartNum:this.num,goodsId:getUrlParam('goodsId'),goodsSpecId:id}}).then(function (res) {
                  // console.log(res)
                    if(res.body.status==1){
                        this.band+=this.num;
                        showDefault('success','加入成功')
                        this.isAlert=!this.isAlert;
                    }else{
                        showDefault('fail',res.body.msg)
                    }




                })
            },

            //确认规格参数
            sureBtn:function(){
                var n='',m='';     // console.log(this.immediateBuy)
                console.log(this.store)
                if(this.specialArr.catName.length!=0){//加入有规格
                    m=this.store.id;
                    $.each($('.special-box').find('.acnm'),function (i,v) {
                        var specId=$(v).find('.special-item-box').find('.active').attr('specId');
                        console.log(specId)
                        n+=specId.toString();
                        n=n.split('');
                        n= n.join(':');
                        console.log(n)
                    });

                }

                    this.getSpecPrice(n)

            },
            //根据规格组合获取价格和库存
            getSpecPrice:function(n){ //查询规格和库存
                this.$http.get(SURL+'app/Goods/goodsSpecPrice',{params:{goodsSpecId:n,goodsId:getUrlParam('goodsId')}}).then(function (res) {
                   // console.log(res)
                    if(res.body.status==1){
                        this.store=res.body.data;
                        var specid=this.store.id==undefined?0:this.store.id;
                        if(this.immediateBuy){
                            n=n==''||undefined?0:n;
                            this.buyImmediately(specid,n)
                        }else{
                           this.addCarts(specid)
                        }

                    }
                })
            },
            //立即购物
            buyImmediately:function(m,n){
               // this.isAlert=!this.isAlert;
                //this.immediateBuy=true;
                var params={
                    cartNum:this.num,
                    goodsId:getUrlParam('goodsId'),
                    goodsSpecId:m,
                    specIds:n
                };
                this.$http.post(SURL+'app/Carts/BuyImmediately',{cartNum:this.num,goodsId:getUrlParam('goodsId'),goodsSpecId:m,specIds:n},{emulateJSON : true}).then(function (res) {
                    if(res.body.status==1){
                        showDefault('success','');
                        this.immediateBuy=false;
                        this.isAlert=!this.isAlert;
                        location.href='../orderAndPay/enterOrder.html?params='+encodeURI(JSON.stringify(params))+'&type=1'
                    }else{
                        showDefault('fail',res.body.msg)
                    }
                })
            },
            //点击收藏
            // 点击数量增加
            addnum:function (f) {
               if(f>0){
                   this.num++;
               }else{
                   if(this.num<=1){
                       this.num=1
                   }
                   this.num--;
               }
            }

        },

    })
    });
</script>
</body>
</html>